<template>
  <div>
    <div class="vadioNav">
      <li @click="handler(1)" :class="{ 'li-active': active == 1 }">推荐</li>
      <li @click="handler(2)" :class="{ 'li-active': active == 2 }">热映</li>
      <li @click="handler(3)" :class="{ 'li-active': active == 3 }">预告</li>
      <li @click="handler(4)" :class="{ 'li-active': active == 4 }">说电影</li>
      <li @click="handler(5)" :class="{ 'li-active': active == 5 }">佳片</li>
      <li @click="handler(6)" :class="{ 'li-active': active == 6 }">剧综</li>
    </div>
    <videoMain :data="videoArr" />
  </div>
</template>
<script>
import getLink from '@/api/getLink.js';
import videoMain from './video-main.vue';
export default {
  components: {
    videoMain,
  },
  data() {
    return {
      active: 1,
      videoArr: [],
    };
  },
  created() {
    getLink('/api/video/tj').then(ok => {
      this.videoArr = ok.data;
    });
  },
  methods: {
    handler(val) {
      switch (val) {
        case 1:
          this.active = 1;
          getLink('/api/video/tj').then(ok => {
            this.videoArr = ok.data;
          });
          break;
        case 2:
          this.active = 2;
          getLink('/api/video/ry').then(ok => {
            this.videoArr = ok.data;
          });
          break;
        case 3:
          this.active = 3;
          getLink('/api/video/yg').then(ok => {
            this.videoArr = ok.data;
          });

          break;
        case 4:
          this.active = 4;
          getLink('/api/video/sdy').then(ok => {
            this.videoArr = ok.data;
          });

          break;
        case 5:
          this.active = 5;
          getLink('/api/video/jp').then(ok => {
            this.videoArr = ok.data;
          });

          break;
        case 6:
          this.active = 6;
          getLink('/api/video/jz').then(ok => {
            this.videoArr = ok.data;
          });
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.vadioNav {
  color: #333;
  height: 1rem;
  display: flex;
  width: 100%;
  font-size: 0.3rem;
  line-height: 1rem;
  font-weight: 500;
  li {
    flex: 1;
    text-align: center;
    position: relative;
  }
  .li-active {
    font-size: 0.35rem;
    &::after {
      width: 0.5rem;
      height: 0.05rem;
      content: '';
      display: block;
      position: absolute;
      bottom: 0.1rem;
      left: 0.35rem;
      margin: auto;
      background-color: red;
    }
  }
}
</style>
